<template>

  <div id="shipping" class="shipping">
    <!-- header -->
    <yd-navbar slot="navbar" fixed>
      <a @click="$router.go(-1)" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </a>
      <span slot="center" style="font-size:18px">收货地址</span>
      <span slot="right"><a @click="edit()">{{editTxt}}</a></span>
    </yd-navbar>
    <!-- content -->
    <div class="content-shipping" fixed>
      <el-row :span="8" v-for="(item,idx) in list" :key="item.id">
        
        <el-card :body-style="{ padding: '0px' }">
          <div style="padding: 14px;">
            <span>{{item.receiverAddress}}</span>
            <a  @click="address(item,idx)">
            <el-radio class="radio" v-model="radio" :label="idx" style="float:right">默认地址</el-radio>
            </a>
            <div class="bottom clearfix">
              <time class="time">{{item.receiverName}} {{item.receiverMobile}}</time>
  
              <el-button v-show="isShow" type="text" class="button" @click.native="deleteShipping(item.id)">
                <i class="el-icon-delete"></i>
              </el-button>
              <el-button v-show="isShow" type="text" class="button" @click.native="show1 = true" style="margin-right:15px;">
                <i class="el-icon-edit"></i>
              </el-button>

              <!-- 在弹出框内修改地址信息 -->
              <yd-popup v-model="show1" position="center" width="90%">
                <yd-cell-item style="margin-top:15px">
                  <span slot="left">收件人：</span>
                  <yd-input slot="right" v-model="item.receiverName" :placeholder="item.receiverName" :showSuccessIcon="false"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                  <span slot="left">联系电话：</span>
                  <yd-input slot="right" v-model="item.receiverMobile" ref="mobile" regex="mobile" :placeholder="item.receiverMobile" :showSuccessIcon="false"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                  <span slot="left">收货地址：</span>
                  <yd-input slot="right" v-model="item.receiverAddress" :placeholder="item.receiverAddress" :showSuccessIcon="false"></yd-input>
                </yd-cell-item>
                <yd-button-group style="text-align:right;padding:15px 5px">
                  <yd-button @click.native="show1 = false" bgcolor="#2196f3" color="#fff">取消</yd-button>
                  <yd-button @click.native="update(item.id,item.receiverName,item.receiverMobile,item.receiverAddress),show1 = false" bgcolor="#2196f3"
                    color="#fff">保存</yd-button>
                </yd-button-group>
              </yd-popup>

            </div>
          </div>
        </el-card>
        
      </el-row>
      <yd-button size="large" @click.native="app" bgcolor="#2196f3" color="#fff">新增地址</yd-button>

    </div>

  </div>

</template>

<script>
  import baseService from '../../axios/'
  export default {
    name: 'shipping',
    data() {
      return {
        message: '收货地址',
        show1: false,
        radio: this.$store.store.state.addressIdx,
        isShow: false,
        editTxt: '编辑',
        list: []
      }
    },
    mounted() {
      this.getlist()
    },
    computed: {
      firstAddress () {
	      return this.$store.store.state.firstAddress 
      },
      addressIdx () {
	      return this.$store.store.state.addressIdx 
      }
    },
    methods: {
      edit() {
        this.isShow = !this.isShow;
        if (this.isShow == false) {
          this.editTxt = "编辑"
        } else {
          this.editTxt = "完成"
        }
      },
      //把默认的地址保存在stroe中
      address(item,idx){
        console.log(item)
        console.log(idx)
        this.setfirstAddress(item)
        this.setaddressIdx(idx)
        console.log(this.$store.store.state.firstAddress) 
      },
      setfirstAddress (address){
          this.$store.store.commit('setfirstAddress',address)
      },
      setaddressIdx (idx){
          this.$store.store.commit('setaddressIdx',idx)
      },
      getlist() {
        baseService.post('/shipping/list.do').then((res) => {
          if (res.data.status == 0) {
            console.log(res.data.data.list)
            this.list = res.data.data.list;
            this.shippingId = 33;
          }
        })
      },
      update(shippingId, receiverName, receiverMobile, receiverAddress) {
        let param = new URLSearchParams();
        console.log(shippingId);
        param.append("shippingId", shippingId);
        param.append("receiverName", receiverName);
        param.append("receiverMobile", receiverMobile);
        param.append("receiverAddress", receiverAddress);
        baseService.post('shipping/select.do', param).then((res) => {
          if (res.data.status == 0) {
            console.log(res.data.data)
          }
        })
      },
      deleteShipping(shippingId) {
        let param = new URLSearchParams();
        param.append("shippingId", shippingId);
        baseService.post('shipping/delete.do', param).then((res) => {
          if (res.data.status == 0) {
            console.log(res.data.data);
            this.$dialog.alert({
              mes: res.data.msg
            });
            this.getlist();
          }
        })
      },
      app() {
        this.$router.push({
          path: '/user/addShipping'
        })
      }
    }
  }

</script>

<style>
  .shipping .content-shipping {
    position: fixed;
    padding-top: 15%;
    height: 94%;
    width: 100%;
    overflow-y: auto !important;
  }

  .content-shipping .yd-cell-item {
    border-bottom: solid !important;
    border-bottom-color: #f2f2f2 !important;
  }

  .content-shipping .el-card__body {
    padding: 20px;
    font-size: 15px;
    text-align: left;
  }

  .content-shipping .time {
    font-size: 13px;
    color: #999;
    display: inline;
  }

  .content-shipping .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .content-shipping .el-card__body .button {
    padding: 0;
    float: right;
  }

  .content-shipping .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .content-shipping .clearfix:after {
    clear: both
  }

</style>
